<template>
  <div>
    <div class="accountList">
      <div class="acc-item" v-for="(item, index) of accList" :key="index">
        <div class="left">
          <div class="logo">
            <img
              :src="
                require(`@/assets/imgs/checkAccount/${getChannelImg(
                  item.type
                )}.png`)
              "
              :style="
                item.type == 'wechat_lite' ||
                item.type == 'wechat_jsapi' ||
                item.type == 'wechat_app'
                  ? 'width:107px'
                  : ''
              "
            />
            <div
              class="tit"
              v-if="
                item.type !== 'ada' &&
                item.type !== 'ali' &&
                item.type !== 'balance'
              "
            >
              {{ item.name }}
            </div>
          </div>
          <div class="command">
            <div class="input-wrap" v-if="item.whetherComplete">
              <el-form ref="form" :inline="true" class="demo-form-inline">
                <span v-for="(citem, idx) of Object.keys(item.info)" :key="idx">
                  <el-form-item
                    v-if="
                      citem !== 'wechat_lite_account_type' &&
                      citem !== 'wechat_jsapi_account_type' &&
                      citem !== 'wechat_app_account_type' &&
                      citem !== 'pay_type_list'
                    "
                    :label="getLabelName(citem, item)"
                    class="w320"
                  >
                    <el-input
                      :value="item.info[citem]"
                      disabled
                      class="w320"
                    ></el-input>
                  </el-form-item>
                </span>
              </el-form>
            </div>
            <div class="btn-wrap" v-else>
              <div class="btn" @click="codeOpenDia(index)">添加</div>
            </div>
          </div>
        </div>
        <div class="right" v-if="item.whetherComplete">
          <div class="del" @click="codeDelAcc(item)">
            <div class="img">
              <img src="@/assets/imgs/setting/del.png" alt="" />
            </div>
            <div class="tit">删除</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 收款账户 -->
    <el-dialog
      class="cardDialog"
      :show-close="false"
      :visible="accDialog"
      label-width="130px"
      label-position="top"
      width="880px"
      top="20vh"
    >
      <div class="addTitle">
        <span>添加收款账户</span>
        <img
          v-if="form1.type != 'balance'"
          :src="
            require(`@/assets/imgs/checkAccount/${getChannelImg(
              form1.type
            )}.png`)
          "
        />
      </div>
      <div class="tip">
        此处配置的收款账号可用于订单分润收款和自身余额账户进行提现，汇付渠道需要同时渠道ID和结算银行卡。
      </div>
      <el-form ref="form1" key="a" :rules="rule1" :model="form1">
        <el-form-item
          v-if="form1.type == 'ali'"
          prop="ali_account_name"
          label="账号名称"
          key="ali_account_name"
        >
          <el-input v-model="form1.ali_account_name"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form1.type == 'ali'"
          prop="ali_user_id"
          label="支付宝账号"
          key="ali_user_id"
        >
          <el-input v-model="form1.ali_user_id"></el-input>
        </el-form-item>

        <el-form-item
          v-if="form1.type == 'wechat_lite'"
          prop="wechat_lite_account_name"
          label="账号名称"
          key="wechat_lite_account_name"
        >
          <el-input v-model="form1.wechat_lite_account_name"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form1.type == 'wechat_lite'"
          prop="wechat_lite_openid"
          label="个人OpenID/微信商户号"
          key="wechat_lite_openid"
        >
          <el-input v-model="form1.wechat_lite_openid"></el-input>
        </el-form-item>

        <el-form-item
          v-if="form1.type == 'wechat_jsapi'"
          prop="wechat_jsapi_account_name"
          label="账号名称"
          key="wechat_jsapi_account_name"
        >
          <el-input v-model="form1.wechat_jsapi_account_name"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form1.type == 'wechat_jsapi'"
          prop="wechat_jsapi_openid"
          label="个人OpenID/微信商户号"
          key="wechat_jsapi_openid"
        >
          <el-input v-model="form1.wechat_jsapi_openid"></el-input>
        </el-form-item>

        <el-form-item
          v-if="form1.type == 'wechat_app'"
          prop="wechat_app_account_name"
          label="账号名称"
          key="wechat_app_account_name"
        >
          <el-input v-model="form1.wechat_app_account_name"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form1.type == 'wechat_app'"
          prop="wechat_app_openid"
          label="个人OpenID/微信商户号"
          key="wechat_app_openid"
        >
          <el-input v-model="form1.wechat_app_openid"></el-input>
        </el-form-item>
        <el-row :gutter="80">
          <el-col :span="12">
            <el-form-item
              v-if="form1.type == 'ada' || form1.type == 'balance'"
              prop="ada_member_id"
              label="渠道商户ID"
              key="ada_member_id"
            >
              <el-input v-model="form1.ada_member_id"></el-input>
            </el-form-item>
            <div
              class="tip tip1"
              v-if="form1.type == 'ada' || form1.type == 'balance'"
            >
              <a href="#" target="_blank">汇付管理后台-用户管理-查看</a>
            </div>
            <div class="tip tip1" v-if="form1.type == 'ada' && userType == -1">
              <a href="#"
                >还没有商户ID？<span @click="openNewDia" style="color: #03bfc6"
                  >前往获取</span
                ></a
              >
            </div>
          </el-col>
          <el-col :span="12" v-if="getUserInfo().userType.search('main') == -1">
            <el-form-item
              v-if="form1.type == 'ada' || form1.type == 'balance'"
              prop="bankAcctType"
              label="结算银行卡类型"
              key="bankAcctType"
            >
              <el-select
                v-model="form1.bankAcctType"
                placeholder="请选择"
                style="width: 360px"
              >
                <el-option
                  v-for="item of bankTypeList"
                  :key="item.type"
                  :label="item.label"
                  :value="item.type"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="80" v-if="getUserInfo().userType.search('main') == -1">
          <el-col :span="12">
            <el-form-item
              v-if="form1.type == 'ada' || form1.type == 'balance'"
              prop="cardNo"
              label="银行卡号"
              key="cardNo"
            >
              <el-input v-model="form1.cardNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              v-if="form1.type == 'ada' || form1.type == 'balance'"
              prop="cardName"
              label="开户名称"
              key="cardName"
            >
              <el-input v-model="form1.cardName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="80" v-if="getUserInfo().userType.search('main') == -1">
          <el-col :span="12">
            <el-form-item
              v-if="form1.type == 'ada' || form1.type == 'balance'"
              prop="bankName"
              label="开户银行"
              key="bankName"
            >
              <el-input v-model="form1.bankName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="0">
              <el-col :span="12">
                <el-form-item
                  label="银行所在地"
                  prop="provCode"
                  v-if="form1.type == 'ada' || form1.type == 'balance'"
                >
                  <el-select
                    v-model="form1.provCode"
                    placeholder="请选择省"
                    @change="handleProv"
                    style="width: 177px; margin-right: 7px"
                  >
                    <el-option
                      v-for="item of provList"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="0"
                  prop="areaCode"
                  v-if="form1.type == 'ada' || form1.type == 'balance'"
                >
                  <el-select
                    v-model="form1.areaCode"
                    placeholder="请选择市"
                    @change="handleArea"
                    style="width: 177px"
                    class="cardNumber"
                  >
                    <el-option
                      v-for="item of cityList"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="80" v-if="getUserInfo().userType.search('main') == -1">
          <el-col :span="12">
            <el-form-item
              v-if="form1.type == 'ada' || form1.type == 'balance'"
              prop="bankNickname"
              label="开户银行支行"
              key="bankNickname"
            >
              <el-input v-model="form1.bankNickname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              v-if="form1.type == 'ada' || form1.type == 'balance'"
              prop="cardTel"
              label="开户行预留手机号"
              key="cardTel"
            >
              <el-input v-model="form1.cardTel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
          v-if="form1.type == 'douyin'"
          prop="douyin_member_id"
          label="渠道商户ID"
          key="douyin_member_id"
        >
          <el-input v-model="form1.douyin_member_id"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cencelReset" class="width120">取消</el-button>
        <el-button type="primary" @click="handleSubmit" class="width120"
          >提交</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      class="cardDialog"
      :show-close="false"
      :visible="storeDialog"
      label-width="130px"
      label-position="top"
      width="1095px"
      top="15vh"
    >
      <div class="addTitle">
        <span>获取商户ID</span>
      </div>
      <div class="tip">
        提交信息后需三方审核成功后方可生成商户ID，建议提交信息1-3工作日后再配置渠道参数。
      </div>
      <el-form ref="form3" key="c" :rules="rule3" :model="form3">
        <el-row :gutter="80">
          <el-col :span="12">
            <el-form-item prop="name" label="企业名称" key="name">
              <el-input v-model="form3.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="11">
                <el-form-item label="经营范围" prop="category_1" key="category">
                  <el-select
                    v-model="form3.category_1"
                    placeholder="请选择一级经营范围"
                    @change="handleCategory"
                    style="width: 208px"
                  >
                    <el-option
                      v-for="item of categoryList1"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label-width="0" prop="category_2">
                  <el-select
                    v-model="form3.category_2"
                    placeholder="请选择二级经营范围"
                    @change="handleCategory1"
                    style="width: 208px"
                    class="cardNumber"
                  >
                    <el-option
                      v-for="item of categoryList2"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="24">
            <el-row :gutter="0">
              <el-col :span="6">
                <el-form-item label="企业地址" prop="provCode">
                  <el-select
                    v-model="form3.provCode"
                    placeholder="请选择省"
                    @change="handleProv"
                    style="width: 238px; margin-right: 7px"
                  >
                    <el-option
                      v-for="item of provList"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="0" prop="areaCode">
                  <el-select
                    v-model="form3.areaCode"
                    placeholder="请选择市"
                    @change="handleArea"
                    style="width: 238px; margin-right: 7px"
                    class="cardNumber"
                  >
                    <el-option
                      v-for="item of cityList"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="address" key="address">
                  <el-input
                    v-model="form3.address"
                    placeholder="请输入"
                    class="cardNumber"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="12">
            <el-form-item
              prop="socialCreditCode"
              label="统一社会信用码"
              key="socialCreditCode"
            >
              <el-input v-model="form3.socialCreditCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="socialCreditCodeExpires"
              label="统一社会信用码有效期"
              key="socialCreditCodeExpires"
            >
              <el-date-picker
                clearable
                v-model="form3.socialCreditCodeExpires"
                style="width: 70%; border-radius: 0px; margin-top: 1px"
                class="rightSelect"
                type="daterange"
                value-format="yyyyMMdd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="至"
                :disabled="form3.socialCreditIdLong"
                unlink-panels
              >
              </el-date-picker>
              <el-checkbox
                v-model="form3.socialCreditIdLong"
                :disabled="!form3.socialCreditCodeExpires"
                @change="
                  (val) => longDateChange(val, 'socialCreditCodeExpires')
                "
                style="margin-left: 40px"
                >长期有效</el-checkbox
              >
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="legalPerson" label="法人姓名" key="legalPerson">
              <el-input v-model="form3.legalPerson" maxlength="10"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="legalMp" label="法人电话" key="legalMp">
              <el-input v-model="form3.legalMp"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              prop="legalCertId"
              label="法人身份证号码"
              key="legalCertId"
            >
              <el-input v-model="form3.legalCertId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="legalCertIdExpires"
              label="法人身份证有效期"
              key="legalCertIdExpires"
            >
              <el-date-picker
                clearable
                v-model="form3.legalCertIdExpires"
                style="width: 70%; border-radius: 0px; margin-top: 1px"
                class="rightSelect"
                type="daterange"
                value-format="yyyyMMdd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="至"
                :disabled="form3.legalCertIdLong"
                unlink-panels
              >
              </el-date-picker>
              <el-checkbox
                v-model="form3.legalCertIdLong"
                :disabled="!form3.legalCertIdExpires"
                @change="(val) => longDateChange(val, 'legalCertIdExpires')"
                style="margin-left: 40px"
                >长期有效</el-checkbox
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cencelReset2" class="width120">取消</el-button>
        <el-button type="primary" @click="handleSubmit2" class="width120"
          >提交</el-button
        >
      </div>
    </el-dialog>

    <!-- <el-dialog
      class="cardDialog"
      :show-close="false"
      :visible="storeDialog"
      label-width="130px"
      label-position="top"
      width="1095px"
      top="15vh"
    >
      <div class="addTitle">
        <span>获取商户ID</span>
      </div>
      <div class="tip">
        提交信息后需三方审核成功后方可生成商户ID，建议提交信息1-3工作日后再配置渠道参数。
      </div>
      <el-form ref="form3" key="c" :rules="rule3" :model="form3">
        <div class="store-type-tab mb20">
          <div
            v-for="(name, index) of storeTypeList"
            :key="index"
            class="tab-item"
            :class="storeTabIdx == index ? 'active' : ''"
            @click="changeType(index)"
          >
            {{ name }}
          </div>
        </div>
        <el-row :gutter="80" v-if="storeTabIdx === 0">
          <el-col :span="12">
            <el-form-item prop="name" label="姓名" key="name">
              <el-input v-model="form3.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="phone" label="手机号" key="phone">
              <el-input v-model="form3.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="证件类型" key="cardType">
                  <el-select v-model="form3.cardType">
                    <el-option label="身份证" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item prop="card" key="card">
                  <el-input v-model="form3.card" class="cardNumber"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row :gutter="80" v-else>
          <el-col :span="12">
            <el-form-item prop="companyName" label="企业名称" key="companyName">
              <el-input v-model="form3.companyName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="11">
                <el-form-item label="经营范围" prop="category_1" key="category">
                  <el-select
                    v-model="form3.category_1"
                    placeholder="请选择一级经营范围"
                    @change="handleCategory"
                    style="width: 208px"
                  >
                    <el-option
                      v-for="item of categoryList1"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label-width="0" prop="category_2">
                  <el-select
                    v-model="form3.category_2"
                    placeholder="请选择二级经营范围"
                    @change="handleCategory1"
                    style="width: 208px"
                    class="cardNumber"
                  >
                    <el-option
                      v-for="item of categoryList2"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="24">
            <el-row :gutter="0">
              <el-col :span="6">
                <el-form-item label="企业地址" prop="provCode">
                  <el-select
                    v-model="form3.provCode"
                    placeholder="请选择省"
                    @change="handleProv"
                    style="width: 238px; margin-right: 7px"
                  >
                    <el-option
                      v-for="item of provList"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="0" prop="areaCode">
                  <el-select
                    v-model="form3.areaCode"
                    placeholder="请选择市"
                    @change="handleArea"
                    style="width: 238px; margin-right: 7px"
                    class="cardNumber"
                  >
                    <el-option
                      v-for="item of cityList"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="area" key="area">
                  <el-input
                    v-model="form3.area"
                    placeholder="请输入"
                    class="cardNumber"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="credit" label="统一社会信用码" key="credit">
              <el-input v-model="form3.credit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="creditDate"
              label="统一社会信用码有效期"
              key="creditDate"
            >
              <el-date-picker
                clearable
                v-model="form3.creditDate"
                style="width: 100%; border-radius: 0px; margin-top: 1px"
                class="rightSelect"
                type="datetimerange"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="legalName" label="法人姓名" key="legalName">
              <el-input v-model="form3.legalName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="legalNumber" label="法人电话" key="legalNumber">
              <el-input v-model="form3.legalNumber"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              prop="legalCarcd"
              label="法人身份证号码"
              key="legalCarcd"
            >
              <el-input v-model="form3.legalCarcd"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="legalDate"
              label="法人身份证有效期"
              key="legalDate"
            >
              <el-date-picker
                clearable
                v-model="form3.legalDate"
                style="width: 100%; border-radius: 0px; margin-top: 1px"
                class="rightSelect"
                type="datetimerange"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cencelReset2">取消</el-button>
        <el-button type="primary" @click="handleSubmit2">提交</el-button>
      </div>
    </el-dialog> -->
    <codeDialogVue
      codeId="1"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import { isPerson, isMobile, isIdCard, isBankCard } from "@/utils/validate";
import codeDialogVue from "@/components/codeDialog.vue";
import { getUserInfo } from "@/utils/public";

export default {
  name: "accountManage",
  components: {
    codeDialogVue,
  },
  data() {
    const checkCardNo = (rule, value, callback) => {
      if (isBankCard(value)) {
        callback();
      } else {
        callback(new Error("请输入有效的银行账号"));
      }
    };
    const testName = (rule, value, callback) => {
      if (isPerson(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的姓名"));
      }
    };
    const testPhone = (rule, value, callback) => {
      if (isMobile(value)) {
        callback();
      } else {
        callback(new Error("号码格式不正确"));
      }
    };
    const testID = (rule, value, callback) => {
      if (isIdCard(value)) {
        callback();
      } else {
        callback(new Error("号码格式不正确"));
      }
    };
    return {
      codeItem: null,
      codeType: "",
      codeDialog: false,
      userType: 0,
      accList: [],
      form1: {}, //动态弹窗
      form3: {
        cardType: "1",
      }, //动态弹窗
      form: {
        memberId: "7we92308ioej038gf5",
        name: "晓晓",
      },
      rule1: {
        // radio: [{ required: true }],
        ali_account_name: [
          { required: true, message: "请输入账户名称", trigger: "change" },
          { max: 64, message: "最大长度64字符", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        wechat_lite_account_name: [
          { required: true, message: "请输入账户名称", trigger: "change" },
          { max: 64, message: "最大长度64字符", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        wechat_jsapi_account_name: [
          { required: true, message: "请输入账户名称", trigger: "change" },
          { max: 64, message: "最大长度64字符", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        wechat_app_account_name: [
          { required: true, message: "请输入账户名称", trigger: "change" },
          { max: 64, message: "最大长度64字符", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        ali_user_id: [
          { required: true, message: "请输入账户", trigger: "change" },
          { max: 64, message: "最大长度64字符", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        wechat_lite_openid: [
          { required: true, message: "请输入OpenId", trigger: "change" },
          { max: 64, message: "最大长度64字符", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        wechat_jsapi_openid: [
          { required: true, message: "请输入OpenId", trigger: "change" },
          { max: 64, message: "最大长度64字符", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        wechat_app_openid: [
          { required: true, message: "请输入OpenId", trigger: "change" },
          { max: 64, message: "最大长度64字符", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        ada_member_id: [
          { required: true, message: "请输入渠道商户ID", trigger: "change" },
          { max: 64, message: "最大长度64字符", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        bankAcctType: [
          { required: true, message: "请选择银行卡类型", trigger: "change" },
        ],
        cardNo: [
          { required: true, message: "请输入银行卡号", trigger: "change" },
          {
            validator: checkCardNo,
            trigger: "change",
          },
        ],
        cardName: [
          { required: true, message: "请输入开户名称", trigger: "change" },
        ],
        bankName: [
          { required: true, message: "请输入开户银行", trigger: "change" },
        ],
        bankNickname: [
          { required: true, message: "请输入开户银行支行", trigger: "change" },
        ],
        cardTel: [
          { required: true, message: "请输入预留手机号", trigger: "change" },
        ],

        provCode: [{ required: true, message: "请选择省", trigger: "change" }],
        areaCode: [{ required: true, message: "请选择市", trigger: "change" }],
        douyin_member_id: [
          { required: true, message: "请输入渠道商户ID", trigger: "change" },
          { max: 64, message: "最大长度64字符", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
      },
      rule3: {
        name: [{ required: true, message: "请输入姓名", trigger: "change" }],
        phone: [{ required: true, message: "请输入手机", trigger: "change" }],
        card: [{ required: true, message: "请输入号码", trigger: "change" }],

        companyName: [
          { required: true, message: "请输入企业名称", trigger: "change" },
        ],
        category_1: [
          { required: true, message: "请选择经营范围", trigger: "change" },
        ],
        category_2: [
          { required: true, message: "请选择经营范围", trigger: "change" },
        ],
        provCode: [{ required: true, message: "请选择省", trigger: "change" }],
        areaCode: [{ required: true, message: "请选择市", trigger: "change" }],
        address: [
          { required: true, message: "请输入地址", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        socialCreditCode: [
          {
            required: true,
            message: "请输入统一社会信用码",
            trigger: "change",
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        socialCreditCodeExpires: [
          { required: true, message: "请选择有效期", trigger: "change" },
        ],
        legalCertIdExpires: [
          { required: true, message: "请选择有效期", trigger: "change" },
        ],
        legalPerson: [
          { required: true, message: "请输入法人姓名", trigger: "change" },
          { max: 10, message: "最大长度10字符", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
          {
            validator: testName,
            trigger: "change",
          },
        ],
        legalMp: [
          { required: true, message: "请输入电话", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
          {
            validator: testPhone,
            trigger: "change",
          },
        ],
        legalCertId: [
          { required: true, message: "请输入身份证", trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
          {
            validator: testID,
            trigger: "change",
          },
        ],
      },
      accDialog: false,
      storeTypeList: ["个人用户", "企业用户"],
      storeTabIdx: 0,
      storeDialog: false,
      categoryList1: [], // 一级经营范围
      categoryList2: [], // 二级经营范围
      provList: [],
      cityList: [],
      bankTypeList: [
        {
          type: "1",
          label: "对公",
        },
        {
          type: "2",
          label: "对私",
        },
      ],
    };
  },
  created() {
    console.log(getUserInfo().userType);
    console.log(getUserInfo().userType.search("main"));
    this.userType = getUserInfo().userType.search("main");
    this.getAccList(); //获取账户

    this.getProvinceInfo(); //获取省市信息
    this.getBusinessNature(); //获取经营范围
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.getAccList(); //获取账户
        }
      },
    },
    deep: true,
  },
  methods: {
    getUserInfo,
    codeStateFn(val) {
      if (val) {
        if (this.codeType == "SMS_BUSINESS_ADD_COLLECTION_ACCOUNT") {
          this.openDia(this.codeItem);
        } else if (this.codeType == "SMS_BUSINESS_DELETE_COLLECTION_ACCOUNT") {
          this.delAcc(this.codeItem);
        }
      }
    },
    longDateChange(val, prop) {
      this[`${prop}End`] = this.form3[prop][1];

      if (val) {
        this.$set(this.form3, prop, [this.form3[prop][0], "20991231"]);
      } else {
        this.$set(this.form3, prop, [this.form3[prop][0], this[`${prop}End`]]);
      }
      //console.log(this.form3);
    },
    getProvinceInfo() {
      // 省
      this.$http
        .get(
          "/dictdata/getByDictTypeAndPid?dictType=ada_bank_province_city&parentId=1"
        )
        .then((res) => {
          if (res.code === "0000") {
            this.provList = res.data;
          }
        });
    },
    getBusinessNature() {
      // 经营范围
      this.$http
        .get("dictdata/getByDictTypeAndPid?dictType=business_type&parentId=0")
        .then((res) => {
          if (res.code === "0000") {
            this.categoryList1 = res.data;
          }
        });
    },
    handleProv(val) {
      // this.$refs.form.validate();
      this.$set(this.form, "areaCode", "");
      this.$http
        .get(
          `/dictdata/getByDictTypeAndPid?dictType=ada_bank_province_city&parentId=${val}`
        )
        .then((res) => {
          if (res.code === "0000") {
            this.cityList = res.data;
          }
        });
    },
    handleArea(val) {
      this.$set(this.form, this.form.areaCode, val);
    },
    handleCategory1(val) {
      this.$set(this.form3, this.form3.category_2, val);
    },
    handleCategory(val) {
      if (this.form3.category_2) this.form3.category_2 = "";
      this.getSecondCate(val);
    },
    // 获取二级经营范围
    getSecondCate(val) {
      this.$http
        .get(
          `dictdata/getByDictTypeAndPid?dictType=business_type&parentId=${val}`
        )
        .then((res) => {
          if (res.code === "0000") {
            this.categoryList2 = res.data;
          }
        });
    },
    handleSubmit2() {
      this.$refs.form3.validate((valid) => {
        if (valid) {
          let param = {
            extra: {
              ...this.form3,
              businessScope:
                this.form3.category_1_name + " " + this.form3.category_2_name,
              legalCertIdExpires: this.form3.legalCertIdExpires[1],
              socialCreditCodeExpires: this.form3.socialCreditCodeExpires[1],
            },
            member_id: getUserInfo().memberId,
          };
          //console.log(param);
          this.$http
            .post("/api/thirdpart/adamember/create", param)
            .then((res) => {
              if (res.code === "0000") {
                this.$message.success(res.msg);
                this.$refs.form3.resetFields(); //重置状态
                // this.form3 = {};
                this.storeDialog = false;
              }
            });
        } else {
          return false;
        }
      });
    },
    cencelReset2() {
      this.$refs.form3.resetFields(); //重置状态
      // this.form3 = {}; //动态弹窗
      this.storeDialog = false;
    },
    changeType(idx) {
      this.storeTabIdx = idx;
    },
    openNewDia() {
      this.form3 = {};
      this.form3.socialCreditIdLong = false;
      this.form3.legalCertIdLong = false;
      let a = setTimeout(() => {
        this.cencelReset(); //关闭现有弹窗
        this.storeDialog = true;
        this.$refs.form3.clearValidate();
        clearTimeout(a);
      }, 0);
    },
    getLabelName(citem, item) {
      console.log(citem);
      switch (citem) {
        case "ada_member_id":
          return "渠道商户ID";
        case "ada_settle_card_no":
          return "结算银行卡";
        case "ali_account_name":
          return "账号名称";
        case "ali_member_id":
          return "支付宝账号";
        case "wechat_lite_account_name":
        case "wechat_jsapi_account_name":
        case "wechat_app_account_name":
          return "账号名称";
        case "wechat_lite_member_id":
        case "wechat_jsapi_member_id":
        case "wechat_app_member_id":
          return item.account_type == "MERCHANT_ID"
            ? "微信商户号"
            : "个人OpenID";
        default:
          return "";
      }
    },
    handleSubmit() {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          var info = {};
          switch (this.form1.type) {
            case "ali":
              info.ali_account_name = this.form1.ali_account_name;
              info.ali_user_id = this.form1.ali_user_id;
              break;
            case "ada":
              info.ada_member_id = this.form1.ada_member_id;
              break;
            case "balance":
              info.ada_member_id = this.form1.ada_member_id;
              break;
            case "douyin":
              info.douyin_merchant_uid = this.form1.douyin_member_id;
              break;
            case "wechat_lite":
              info.wechat_lite_account_name =
                this.form1.wechat_lite_account_name;
              info.wechat_lite_openid = this.form1.wechat_lite_openid;
              break;
            case "wechat_jsapi":
              info.wechat_jsapi_account_name =
                this.form1.wechat_jsapi_account_name;
              info.wechat_jsapi_openid = this.form1.wechat_jsapi_openid;
              break;
            case "wechat_app":
              info.wechat_app_account_name = this.form1.wechat_app_account_name;
              info.wechat_app_openid = this.form1.wechat_app_openid;
              break;
            default:
              break;
          }
          let param = {
            ...this.form1,
            // memberId: this.$route.query.id,
            info,
          };
          //console.log(param);
          this.$http
            .post(`/api/sub/member/base/channel/account/set`, param)
            .then((res) => {
              if (res.code === "0000") {
                this.$message.success("添加收款账户成功");
                this.cencelReset();
                this.getAccList(); //获取账户
              }
            });
        } else {
          return false;
        }
      });
    },
    cencelReset() {
      this.$refs.form1.resetFields(); //重置状态
      this.form1 = {}; //重置状态
      //console.log(this.form1);
      this.accDialog = false;
    },
    codeOpenDia(val) {
      console.log(val);
      if (getUserInfo().checkFlag) {
        this.openDia(val);
      } else {
        this.codeItem = val;
        this.codeDialog = true;
        this.codeType = "SMS_BUSINESS_ADD_COLLECTION_ACCOUNT";
      }
    },
    openDia(idx) {
      //console.log(idx);
      this.form1 = {
        ...this.form1,
        ...this.accList[idx].info,
        type: this.accList[idx].type,
        //后台需要参数
        channel: this.accList[idx].type,
        info: this.accList[idx].info,
        // combineTypes: this.accInfo[idx].combineTypes,
      };
      // console.log(this.form1);
      this.accDialog = true;
    },
    codeDelAcc(val) {
      if (getUserInfo().checkFlag) {
        this.delAcc(val);
      } else {
        this.codeItem = val;
        this.codeDialog = true;
        this.codeType = "SMS_BUSINESS_DELETE_COLLECTION_ACCOUNT";
      }
    },
    delAcc(item) {
      let that = this;
      that
        .$confirm(`确定删除该账户?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          showClose: false,
          closeOnClickModal: false,
          closeOnPressEscape: false,
          customClass: "confirm",
          type: "warning",
          center: true,
        })
        .then(() => {
          let param = {
            channel: item.type,
            // combineTypes: item.combineTypes,
            // memberId: this.$route.query.id,
          };
          this.$http
            .post(`/api/sub/member/base/channel/account/cancel`, param)
            .then((res) => {
              if (res.code === "0000") {
                this.$message.success(res.msg);
                this.getAccList(); //获取账户
              }
            });
        });
    },
    getChannelImg(type) {
      switch (type) {
        case "ada":
          return "c1";
        case "ali":
          return "c2";
        case "wechat_lite":
        case "wechat_jsapi":
        case "wechat_app":
          return "c3";
        case "douyin":
          return "c4";
        case "balance":
          return "c5";
        default:
          return "c1";
      }
    },
    getAccList() {
      this.$http
        .get(`/api/sub/member/base/channel/account/list4SetMenu`)
        .then((res) => {
          if (res.code === "0000") {
            var cList = JSON.parse(JSON.stringify(res.data));
            cList.map((item) => {
              if (item.info !== null) {
                const { ...newInfo } = item.info;
                item.info = newInfo;
              }
            });
            console.log(cList);
            this.accList = cList;
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.w320 {
  width: 17vw;
}
.mb20 {
  margin-bottom: 20px;
}
.cardNumber {
  margin-top: 32px;
}
.store-type-tab {
  display: flex;
  .tab-item {
    padding: 6px 42px;
    background: #f0f0f0;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4f595f;
    cursor: pointer;
    &:nth-of-type(1) {
      border-radius: 4px 0px 0px 4px;
    }
    &:nth-of-type(2) {
      border-radius: 0px 4px 5px 0px;
    }
    &.active {
      background: #03bfc6;
      color: #ffffff;
    }
  }
}
.cardDialog {
  background: transparent !important;
  box-shadow: none !important;
  .addTitle {
    width: 100%;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);

    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 130px;
    }
  }
  .tip {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    margin-top: 12px;
    margin-bottom: 30px;
    &.tip1 {
      margin-bottom: 12px;
    }
    a {
      text-decoration: none;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #869daa;
    }
  }
  :deep(.el-dialog) {
    border-radius: 16px;
  }
  :deep(.el-dialog__body) {
    padding: 41px 40px;
    padding-top: 10px;
    padding-bottom: 98px;
    background: #fff;
    border-radius: 16px;
    margin-bottom: -82px;
  }
  // :deep(.el-button--small) {
  //   width: 74px;
  // }
  // :deep(.el-input__inner) {
  //   padding-left: 40px;
  // }
  .dialog-footer {
    margin-right: 22px;
  }
  :deep(.el-form-item__content) {
    position: relative;
  }
  .form-img {
    width: 22px;
    border-radius: 22px;
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 1;
  }
}
.accountList {
  .acc-item {
    padding: 40px 0;
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(212, 224, 233, 0.5);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    div.left,
    div.right {
      height: 80px;
    }
    .left {
      display: flex;
      .logo {
        min-width: 275px;
        padding: 0 23px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #e9e9e9;
        .tit {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1d1c1c;
          padding-left: 15px;
          border-left: 1px solid #ccc;
        }
        img {
          margin-right: 15px;
        }
      }
      .command {
        padding: 0 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        :deep(.el-form-item) {
          margin: 0 30px;
        }
        .btn-wrap {
          margin: 0 30px;
          .btn {
            width: 134px;
            height: 32px;
            border-radius: 4px;
            border: 1px solid #03bfc6;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #03bfc6;
            line-height: 32px;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
    .right {
      width: 179px;
      height: inherit;
      display: flex;
      justify-content: center;
      border-left: 1px solid #e9e9e9;
      .del {
        width: 36px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .img {
          width: 100%;
          height: 36px;
          border-radius: 36px;
          background: #e23d28;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .tit {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #4f595f;
          margin-top: 8px;
        }
      }
    }
  }
}
</style>
